<template>
    <div style="overflow-x: hidden" class="wh-100 overflow-scroll">
        <div class="w-100 h-10 bor-base-b"></div>
        <div class="w-100 h-90">
            <div style="background-color: #e7f0fc" class="d-flex my-24 h-35 mx-28">
                <div class="w-50 h-100">
                    <div style="font-size: 18px; font-weight: bold" class="mt-16 ml-24 mb-8">{{ personalInformation.name }}</div>
                    <div style="font-size: 12px" class="ml-24 mt-8">{{ basicInformationCalculation }}</div>
                    <div style="font-size: 12px" class="ml-24 mt-8">{{ '手机号码：' + personalInformation.tel }}</div>
                    <div style="font-size: 12px" class="ml-24 mt-8">{{ '电子邮箱：' + personalInformation.emamil }}</div>
                    <div style="font-size: 12px" class="d-flex ml-24 mt-8">
                        <div>教育背景：</div>
                        <div>
                            <div>{{ personalInformation.undergraduateEducationBackground }}</div>
                            <div>{{ personalInformation.postgraduateEducationBackground ? personalInformation.postgraduateEducationBackground : '' }}</div>
                            <div>{{ personalInformation.doctoralEducationBackground ? personalInformation.doctoralEducationBackground : '' }}</div>
                        </div>
                    </div>
                    <div class="d-flex mt-16">
                        <div class="ml-32 mr-52 d-flex-align-center">
                            <div class="mr-16"><i-switch v-model="personalInformation.isBeSearched" /></div>
                            <div style="font-size: 13px" class=" ">是否允许被企业搜索</div>
                        </div>
                        <div class="d-flex-align-center">
                            <div class="mr-16"><i-switch v-model="personalInformation.isHideYourResume" /></div>
                            <div style="font-size: 13px" class="">是否隐藏简历</div>
                        </div>
                    </div>
                </div>
                <div class="w-50 h-100 pl-100 pt-84">
                    <div class="h-20 ml-100 pl-100 mt-100">
                        <div class="d-flex ml-52 pl-100">
                            <Button>删除</Button>
                            <Button type="primary">编辑</Button>
                        </div>
                    </div>
                </div>
            </div>
            <div style="background-color: #e7f0fc" class="my-36 d-flex h-15 mx-28 pt-20">
                <div class="fs-16 fw-12 ml-20 mr-auto">求职意向</div>
                <div class="d-flex mr-20">
                    <Button>删除</Button>
                    <Button type="primary">编辑</Button>
                </div>
            </div>
            <div class="mx-56">
                <Form v-if="isForm" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100" class="h-auto">
                    <form-item label="工作地区" prop="operationalArea">
                        <Select v-model="formValidate.operationalArea" multiple :max-tag-count="4" style="width: 260px" @on-change="openIcon('iClearArea')">
                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            <Icon v-if="iClearArea" slot="prefix" type="ios-close" @click="clearSelectArea('operationalArea')" />
                        </Select>
                    </form-item>
                    <form-item label="从事行业" prop="operationalArea">
                        <Select v-model="formValidate.engageInTheIndustry" multiple :max-tag-count="4" style="width: 260px" @on-change="openIcon('iClearArea')">
                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            <Icon v-if="iClearArea" slot="prefix" type="ios-close" @click="clearSelectArea('operationalArea')" />
                        </Select>
                    </form-item>
                    <form-item label="担任职位" prop="operationalArea">
                        <Select v-model="formValidate.takeUpAPosition" multiple :max-tag-count="4" style="width: 260px" @on-change="openIcon('iClearArea')">
                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            <Icon v-if="iClearArea" slot="prefix" type="ios-close" @click="clearSelectArea('operationalArea')" />
                        </Select>
                    </form-item>
                    <form-item label="工作类型" prop="operationalArea">
                        <RadioGroup v-model="formValidate.typeOfWork">
                            <Radio label="fullTime">
                                <span>全职</span>
                            </Radio>
                            <Radio label="practice">
                                <span>实习</span>
                            </Radio>
                            <Radio label="partTimeJob">
                                <span>兼职</span>
                            </Radio>
                        </RadioGroup>
                    </form-item>
                    <form-item label="薪酬范围" prop="operationalArea">
                        <div class="d-flex">
                            <Input v-model="formValidate.typeOfWork" clearable style="width: 100px" />
                            <div>K至</div>
                            <Input v-model="formValidate.typeOfWork" clearable style="width: 100px" />
                            <div>K</div>
                        </div>
                    </form-item>
                    <form-item label="到岗时间" prop="operationalArea">
                        <Select v-model="formValidate.takeUpAPosition" multiple :max-tag-count="4" style="width: 260px" @on-change="openIcon('iClearArea')">
                            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            <Icon v-if="iClearArea" slot="prefix" type="ios-close" @click="clearSelectArea('operationalArea')" />
                        </Select>
                    </form-item>
                    <form-item label="求职状态" prop="operationalArea">
                        <RadioGroup v-model="formValidate.typeOfWork">
                            <Radio label="fullTime">
                                <span>积极找工作</span>
                            </Radio>
                            <Radio label="practice">
                                <span>随便看看</span>
                            </Radio>
                            <Radio label="partTimeJob">
                                <span>暂时不找工作</span>
                            </Radio>
                        </RadioGroup>
                    </form-item>
                    <form-item prop="operationalArea">
                        <Button type="primary">保存</Button>
                        <Button>取消</Button>
                    </form-item>
                </Form>
            </div>
        </div>
    </div>
</template>
+
<script>
export default {
    data() {
        return {
            isForm: true,
            formValidate: {
                operationalArea: '',
                engageInTheIndustry: '',
                takeUpAPosition: '',
                typeOfWork: ''
            },
            ruleValidate: {
                operationalArea: [{ required: true, message: '数据有空值，请检查！', trigger: 'blur' }]
            },
            personalInformation: {
                isBeSearched: true,
                isHideYourResume: false,
                name: '郭冬临',
                age: '25岁',
                school: '河南财经政法大学',
                timeOfGraduation: '2023应届',
                education: '本科',
                major: '金融管理',
                tel: '18037188679',
                emamil: '1961764232@qq.com',
                undergraduateEducationBackground: '2009.03 - 2011.06  本科  河南财经政法大学',
                postgraduateEducationBackground: '2023.03 - 2025.07  研究生  河南大学',
                doctoralEducationBackground: '2023.03 - 2025.07  研究生  河南大学'
            },
            cityList: [
                {
                    value: 'New York',
                    label: 'New York'
                },
                {
                    value: 'London',
                    label: 'London'
                },
                {
                    value: 'Sydney',
                    label: 'Sydney'
                },
                {
                    value: 'Ottawa',
                    label: 'Ottawa'
                },
                {
                    value: 'Paris',
                    label: 'Paris'
                },
                {
                    value: 'Canberra',
                    label: 'Canberra'
                }
            ]
        };
    },
    computed: {
        basicInformationCalculation: function () {
            return (
                '基础信息：' +
                this.personalInformation.age +
                ' | ' +
                this.personalInformation.school +
                this.personalInformation.timeOfGraduation +
                ' | ' +
                this.personalInformation.education +
                ' | ' +
                this.personalInformation.major
            );
        }
    },
    watch: {
        operationalArea: function (nvar) {
            if (nvar.length > 0) {
            }
        }
    },
    methods: {
        clearSelectArea: function (itemName) {
            debugger;
            if (itemName === 'operationalArea') {
                this.formValidate.operationalArea = '';
            }
        },
        openIcon: function (itemName) {
            debugger;
            if (itemName === 'iClearArea') {
                if (this.formValidate.operationalArea.length > 0) {
                    this.iClearArea = true;
                } else {
                    this.iClearArea = false;
                }
            }
        }
    }
};
</script>
<style scoped></style>
